import 'package:flutter/material.dart';

void main() {
  // 1. 运行应用程序。
  runApp(const MaterialApp(
    home: Main(),
  ));
}

class Main extends StatelessWidget {
  const Main({super.key});

  static const List myList = [
    {
      "createTime": "2021-05-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯",
      "totalNum": 1,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml "
    },
    {
      "createTime": "2021-08-21 19:05:47",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/f899c55f36cb74232abb349234d9e676.png",
      "name": "儿童防污/防蚊T恤110cm",
      "totalNum": 1,
      "curPrice": 89.5,
      "totalMoney": 89.5,
      "attrsText": "颜色:白色柠檬（防污） 尺码:160cm "
    },
    {
      "createTime": "2021-08-15 12:33:54",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/dcd0937695ffd65053adfac36b79517e.jpg",
      "name": "【包邮】冰与火的碰撞威士忌杯2支装水杯",
      "totalNum": 1,
      "curPrice": 39.5,
      "totalMoney": 39.5,
      "attrsText": "规格:基础款复古菱纹2只（国产） "
    },
    {
      "createTime": "2021-07-23 00:01:09",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg",
      "name": "德国百年工艺高端水晶玻璃红酒杯2支装",
      "totalNum": 1,
      "curPrice": 139.5,
      "totalMoney": 139.5,
      "attrsText": "规格:白葡萄酒杯双杯 "
    },
    {
      "createTime": "2021-05-17 10:59:13",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/c327b313314b9362ce9f49b253b0b61c.png",
      "name": "网易智造零感蓝牙耳机",
      "totalNum": 1,
      "curPrice": 59.5,
      "totalMoney": 59.5,
      "attrsText": "颜色:幻夜灰 "
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '案例 - 订单商品信息',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.black12,
        child: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(myList[index]['createTime']),
                      const Text(
                        '待发货',
                        style: TextStyle(color: Colors.amber),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10), // 充当 margin 角色
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Image.network(
                        myList[index]['image'],
                        height: 100,
                        width: 100,
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: SizedBox(
                          height: 100,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                myList[index]['name'],
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              ),
                              Container(
                                padding: const EdgeInsets.symmetric(
                                    vertical: 2, horizontal: 5),
                                decoration: BoxDecoration(
                                    color: Colors.white54,
                                    borderRadius: BorderRadius.circular(5)),
                                child: const Text(
                                  '规格:白色240ml',
                                  style: TextStyle(
                                    color: Colors.grey,
                                  ),
                                ),
                              ),
                              Text('¥${myList[index]['curPrice']}'),
                            ],
                          ),
                        ),
                      ),
                      const Text(
                        'x 2',
                        style: TextStyle(height: 3),
                      )
                    ],
                  ),
                  // 底部合计 + 按钮
                  const Text('合计：¥239.00'),
                  const SizedBox(height: 10), // 间隔
                  Row(
                    mainAxisSize: MainAxisSize.min, // 根据内容调整宽度
                    children: [
                      ElevatedButton(
                        onPressed: () {},
                        child: const Text('查看详情'),
                      ),
                      const SizedBox(width: 10),
                      FilledButton(
                        onPressed: () {},
                        child: const Text('再次购买'),
                      )
                    ],
                  )
                ],
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 1,
                margin: const EdgeInsets.symmetric(vertical: 10),
                color: Colors.black38,
              );
            },
            itemCount: myList.length),
      ),
    );
  }
}
